Create long image stitcher app in Swift

Before China national day, I created a long image stitcher in Swift. Now I want to briefly talk about how my thinking process of find the related technique and adopt it in my app.

At first, I realized the hardest part is how to remove the overlapped part between images. Because the task is not only about stitching each images together, but also it requires to remove the overlapped/duplicate part to make the generated long image as one.

1. What my app would looks like?

The fast way to know how your app appearance would be constructed is to look at your competitior's app. So I find a high rated image stitcher app called "Trailer" in App Store. That give me a first impression how my app's UI would looks like.

2. What technique to use (the key part)?

By now I have no idea how I could accomplish that stitching algorithm, however I do know from where I should find some helpful stuff. In my understand, this may belong to image processing concept in Computer Vision. Then I start to find some ready-made project in Github by searching keyworks like "image stitching" or "long image stitcher" etc. After that I found a few projects written with C++, Python and Swift. They both used a framework called OpenCV, which was written in C++ for the latest version and includes some built-in components for image processing and it could adopt iOS platform.

Then OpenCVSwiftStitch come to my sight. It is an app written in Swift & Objective-C and connect to OpenCV C++ library functions. Therefore, it demonstrate how to connect OpenCV C++ functions in Swift. That is what I want. Then I clone that project to my local machine and build, run it.

The app has almost no user interface. On launch, the stitching code operates on four sample images, displaying the result in a UIScrollView. It support to stitch panoramas images to a new long image. In short, it stitch images from left and right side. And the most important part is it provides Objective-C wrapper class to let Swift talk to C++.

3. Start to create my app

As a demo app, I borrow the UI design from "Trailer" app and do some modification per my taste.

modification

The original function in OpenCVSwiftStitch is to stitch images from left and right orientation, however my app needs stitching from up and down. So I rotate each imported image to left before passing it to image processing.

original image orientation, stitch with left and right.

rotate each image by 90 degree counterclockwise

4. Errors

You may get below error when working with OpenCV wrapper.

That is because C++ Macro is conflict with Apple Macro, to fix it we should put all C++ header above Apple header. In below case, I move #import "stitching.h" above Apple header #import "UIImage+OpenCV.h" and #import "UIImage+Rotate.h".

// Before change
#import "CVWrapper.h"
#import "UIImage+OpenCV.h"
#import "stitching.h"
#import "UIImage+Rotate.h"

// After change
#import "stitching.h"
#import "CVWrapper.h"
#import "UIImage+OpenCV.h"
#import "UIImage+Rotate.h"

Conclusion:

Well, that is it. I only cover my thinking process in this article, wityout including the image stitching algorithm and code.

For the complete project, please go to repo